<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.7.0.min.js"> </script>
    <script>
        function submitFun() {
            const longUrl = $('#longUrlId').val();
            $.ajax({
                url:'http://'+document.domain+':'+location.port+'/short/url/make',
                method: 'POST',
                data:{
                    'url':longUrl
                },
                success:function (response) {
                    console.log(response)
                    if (response.code===200) {
                        const showDiv = $('#showId'); //拿到用来展示短地址的生成的标签
                        showDiv.empty() //清空之前生成的子标签
                        const pElement = $('<p>').text("短地址是：" + response.url); //把新生成的短地址展示出来
                        showDiv.append(pElement)
                    }else {
                        //alert(response.error)
                        const showDiv = $('#showId'); //拿到用来展示短地址的生成的标签
                        showDiv.empty() //清空之前生成的子标签
                        const pElement = $('<p>').text("错误消息："+response.error); //把错误消息写出来
                        showDiv.append(pElement)
                    }

                },
                error:function (xhr, status, error) {
                    const showDiv = $('#showId'); //拿到用来展示短地址的生成的标签
                    showDiv.empty() //清空之前生成的子标签
                    const pElement = $('<p>').text("错误消息："+error); //把错误消息写出来
                    showDiv.append(pElement)
                }

            })
        }

    </script>
</head>
<body>
<input type="text" id="longUrlId">
<input type="button" value="提交" onclick="submitFun()">
<div id="showId">

</div>

</body>
</html>